<template>
  <div class="modal-wrap"></div>
  <div>嘻嘻哈哈{{ foo }}</div>
  <div>
    <el-input v-model="foo"></el-input>
  </div>
  <div>嘻嘻哈哈{{ foo }}</div>
  <div>
    <el-input v-model="foo"></el-input>
  </div>
  <div>嘻嘻哈哈{{ foo }}</div>
  <div>
    <el-input v-model="foo"></el-input>
  </div>
  <div>嘻嘻哈哈{{ foo }}</div>
  <div>
    <el-input v-model="foo"></el-input>
  </div>
  <div>嘻嘻哈哈{{ foo }}</div>
  <div>
    <el-input v-model="foo"></el-input>
  </div>
  <div class="footer-wrap">
    <el-button type="primary" @click="onConfirm">确认</el-button>
    <el-button @click="handleCancel">取消</el-button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from "vue";
const props = withDefaults(
  defineProps<{
    modal?: {
      close: Function;
    };
    done: Function;
  }>(),
  {}
);

const foo = ref("inner foo");

const onConfirm = () => {
  props.done("我确认了");
};
const handleCancel = () => {
  props.modal.close();
};

onMounted(() => {
  const app = getCurrentInstance();
  console.log("🚀 ~ 111:", app);
});

defineExpose({ foo });
</script>

<style scoped></style>
